import { TodoType } from '../../custom_types';
import { useState, FC } from 'react';
import { useDispatch } from 'react-redux';
import { updateTodo, removeTodo } from '../TodoListSlice';
import './index.scss';
const Item: FC<TodoType> = (props) => {
  const { id, name, done } = props;
  const dispatch = useDispatch();
  const [mouse, setMouse] = useState(false);
  const handleCheck = () => {
    return (event: React.ChangeEvent<HTMLInputElement>) => {
      const value = event.target.checked;
      const newItem = { ...props, done: value };
      dispatch(updateTodo(newItem));
      console.log('handleCheck', value);
    };
  };
  const handleMouse = (flag: boolean) => {
    return () => {
      setMouse(flag);
    };
  };

  const deleteItem = (id: string) => {
    dispatch(removeTodo(id));
  };
  return (
    <li
      className="item"
      onMouseEnter={handleMouse(true)}
      onMouseLeave={handleMouse(false)}
      style={{ backgroundColor: mouse ? '#ddd' : 'white' }}
    >
      <label className="input-container">
        <input type="checkbox" id={id} checked={done} onChange={handleCheck()} />
        <span>{name}</span>
      </label>
      &nbsp;&nbsp;
      <button
        className="button"
        style={{ display: mouse ? 'inline-block' : 'none' }}
        onClick={() => deleteItem(id)}
      >
        删除
      </button>
    </li>
  );
};

export default Item;
